<nz-spin [nzSpinning]="_isSpinning" [nzTip]="'组件加载中，请稍后...'">
<form nz-form style="margin-bottom: 36px;" [formGroup]="validateForm" (ngSubmit)="submitForm($event,validateForm.value)">
  <div nz-form-item nz-row>
    <h3>新增/修改远程课堂</h3>
  </div>
  <div nz-row [nzGutter]="8">
      <div nz-col [nzSpan]="12">
        <nz-card>
          <ng-template #title>
            课程内容
          </ng-template>
          <ng-template #body>
            <div nz-form-item nz-row>
              <div nz-col [nzSpan]="4" nz-form-label>
                <label nz-form-item-required>上传封面图:</label>
              </div>
              <div nz-col [nzSpan]="12" nz-form-control>
                <input type="hidden" formControlName="pic" value="picid">
                <app-previewimg  [(previewImgSrcs)]="previewImgSrc" (previewImgFileChange)="toSet(previewImgFile,picid,0)"  [(previewImgFile)]="previewImgFile" [maxPic]="1" style="padding: 0px"></app-previewimg>
              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSpan]="4">
                <label nz-form-item-required>标题</label>
              </div>
              <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('title')" nzHasFeedback>
                <nz-input formControlName="title"  [nzType]="'text'" [nzPlaceHolder]="'请输入标题'" [nzSize]="'large'" >
                </nz-input>
                <div nz-form-explain *ngIf="getFormControl('title').dirty&&getFormControl('title').hasError('required')">请输入标题!</div>
                <div nz-form-explain *ngIf="getFormControl('title').dirty&&getFormControl('title').pending">校验中...</div>
              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSpan]="4">
                <label>发布类型</label>
              </div>
              <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('choosetype')">
                <nz-checkbox-group formControlName="choosetype" [(ngModel)]="checkOptionsOne" ></nz-checkbox-group>

              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-col [nzSpan]="4" nz-form-label>
                <label nz-form-item-required>关键词</label>
              </div>
              <div>
                <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('keyword')" nzHasFeedback>
                  <nz-input formControlName="keyword"   [nzPlaceHolder]="'keyword'" [nzType]="'text'" [nzSize]="'large'">
                  </nz-input>
                  <div nz-form-explain *ngIf="getFormControl('keyword').dirty&&getFormControl('keyword').hasError('required')">请输入关键词！</div>
                </div>
              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-col [nzSpan]="4" nz-form-label>
                <label nz-form-item-required>发布状态</label>
              </div>
              <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('status')" nzHasFeedback>
                <nz-select formControlName="status" [nzSize]="'large'"  >
                  <nz-option [nzLabel]="'未发布'" [nzValue]="'0'"></nz-option>
                  <nz-option [nzLabel]="'已发布'" [nzValue]="'1'"></nz-option>
                  <nz-option [nzLabel]="'已下架'" [nzValue]="'2'"></nz-option>
                </nz-select>

                <div nz-form-explain *ngIf="getFormControl('status').dirty&&getFormControl('status').hasError('required')">请确认密码！</div>
                <div nz-form-explain *ngIf="getFormControl('status').dirty&&getFormControl('status').hasError('confirm')">您输入的两个密码不一致！</div>
              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-col [nzSpan]="4" nz-form-label>
                <label nz-form-item-required>展览简介</label>
              </div>
              <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('description')">
                <nz-input formControlName="description" [nzRows]="2" [nzType]="'textarea'" [nzPlaceHolder]="'请填写展览简介'"  [nzSize]="'large'">
                </nz-input>
                <div nz-form-explain *ngIf="getFormControl('description').dirty&&getFormControl('description').hasError('required')">请填写展览简介!</div>
              </div>
            </div>
          </ng-template>
        </nz-card>
      </div>
    <div nz-col [nzSpan]="12">
      <nz-card style="height: 537px">
        <ng-template #title>
          讲师介绍
        </ng-template>
        <ng-template #body>
          <div nz-form-item nz-row>
            <div nz-col [nzSpan]="4" nz-form-label>
              <label nz-form-item-required>讲师</label>
            </div>
            <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('lecturerid')">
              <nz-select
                *ngIf="ifchoose==0"
                style="width: 70%;float: left"
                nzAllowClear
                formControlName="lecturerid"
                [nzSize]="'large'"
                [nzPlaceHolder]="'Select a person'"
                [nzShowSearch]="true">
                <nz-option
                  *ngFor="let option of timeperiod"
                  [nzLabel]="option.lecturername+':'+option.lecturerdescription"
                  [nzValue]="option.id">
                </nz-option>
              </nz-select>
              <a *ngIf="ifchoose!=0" (click) = "ifchoose = 0" [nzSize]="'large'" style="width: 100%;float: right;line-height: 28px" nz-button [nzType]="'danger'">
                <span>取消新增</span>
              </a>
              <a *ngIf="ifchoose==0" [nzSize]="'large'" (click) = "ifchoose = 1" style="width: 25%;float: right;line-height: 28px" nz-button [nzType]="'default'">
                <span>新增</span>
              </a>

              <div style="clear: both;" nz-form-explain *ngIf="getFormControl('lecturerid').dirty&&getFormControl('lecturerid').hasError('required')">请选择或填写讲师!</div>
            </div>
          </div>
          <div *ngIf="ifchoose!=0">
            <div nz-form-item nz-row>
              <div nz-col [nzSpan]="4" nz-form-label>
                <label nz-form-item-required>上传头像</label>
              </div>
              <div nz-col [nzSpan]="12" nz-form-control>
                <input type="hidden" formControlName="lecturerpic" value="picids">
                <app-previewimg  [(previewImgSrcs)]="previewImgSrcs" (previewImgFileChange)="toSet(previewImgFiles,picids,1)"  [(previewImgFile)]="previewImgFiles" [maxPic]="1" style="padding: 0px"></app-previewimg>
              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSpan]="4">
                <label nz-form-item-required>讲师姓名:</label>
              </div>
              <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('lecturername')" nzHasFeedback>
                <nz-input formControlName="lecturername"  [nzType]="'text'" [nzPlaceHolder]="'请输入讲师姓名'" [nzSize]="'large'" >
                </nz-input>
                <div nz-form-explain *ngIf="getFormControl('lecturername').dirty&&getFormControl('lecturername').hasError('required')">请输入讲师姓名!</div>
              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-col [nzSpan]="4" nz-form-label>
                <label nz-form-item-required>讲师描述</label>
              </div>
              <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('lecturerdescription')">
                <nz-input formControlName="lecturerdescription" [nzRows]="2" [nzType]="'textarea'" [nzPlaceHolder]="'请填写讲师描述'"  [nzSize]="'large'">
                </nz-input>
                <div nz-form-explain *ngIf="getFormControl('lecturerdescription').dirty&&getFormControl('lecturerdescription').hasError('required')">请填写讲师描述!</div>
              </div>
            </div>
          </div>
          <nz-alert
            *ngIf="ifchoose==0"
            [nzType]="'info'"
            [nzMessage]="'温馨提示'"
            [nzDescription]="'请选择或点击新增来绑定此课程的老师，课程老师只能绑定一位主讲老师...'"
            [nzShowIcon]="'true'">
          </nz-alert>
          <div nz-row style="width: 100%; padding: 2px;background-color: #f0f0f0;margin-top: 12px;padding-left: 24px;border-radius: 5px">
            <h2 style="font-size: 16px;padding: 12px 0px;display: block;text-align: center;cursor: pointer" (click)="showModal('2')">编辑章节</h2>
          </div>
          <div nz-row style="width: 100%; padding: 2px;background-color: #f0f0f0;margin-top: 12px;padding-left: 24px;border-radius: 5px">
            <h2 style="font-size: 16px;padding: 12px 0px;display: block;text-align: center;cursor: pointer" (click)="showModal('0')">编辑小节</h2>
          </div>


        </ng-template>
      </nz-card>
    </div>
  </div>
</form>
<div nz-form-item nz-row>
    <button style="float:right;margin:0px 24px;" nz-button [nzSize]="'large'" (click)="resetForm($event)">重置</button>
    <button style="float: right" nz-button [nzType]="'primary'" [nzSize]="'large'"  (click)="submitFn()" [disabled]="!validateForm.valid">提交</button>

</div>

</nz-spin>

<nz-modal [nzVisible]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel($event)">
  <ng-template #modalTitle>
    {{ctile}}
  </ng-template>
  <ng-template #modalContent >
    <div [ngStyle]="{'height':height}">
    <chapters-com *ngIf="ifedit=='1'" [chapterid]="chapterid" [chid]="chid" (test)="test($event)"></chapters-com>
    <nz-collapseset *ngIf="ifedit=='0'">
      <nz-collapse
        *ngFor="let panel of charpterList;let i = index"
        [nzTitle]=" '第'+panel.sectionsort+'章:'+panel.sectionname"
        [nzActive]="i==0">
        <p *ngFor="let item of panel.trifles" style="padding:8px 0px;overflow: hidden;">
          <span class="left">第{{item.chaptersort}}节:{{item.chaptername}}</span>
          <span class="right" style="margin-left: 12px; color: #aa0000" (click)="deleteRepeat('0',item.id)">删除</span>
          <span class="right"  (click)="changeRepeat(item.id,item.chid)">修改</span>
        </p>
        <p style="padding:8px 0px;overflow: hidden;">
          <span class="left"  style="color:#006dcc;cursor: pointer" (click)="changeRepeat('',panel.id)">新增小结</span>
          <span class="right" style="margin-right: 6px; color: #aa0000" (click)="deleteRepeat('1',i)">删除全部</span>
        </p>
      </nz-collapse>
    </nz-collapseset>
    <nz-table *ngIf="ifedit=='2'" #nzTable [nzDataSource]="charpterList" [nzIsPagination]="false"  [nzScroll]="{y:240}">
        <ng-template #nzFixedHeader>
          <thead nz-thead>
          <tr>
            <th nz-th [nzWidth]="'210px'" style="text-indent: 12px;"><span>章节名称</span></th>
            <th nz-th [nzWidth]="'120px'" style="text-align: center"><span>章节排序</span></th>
            <th nz-th style="text-indent: 24px;"><span>操作</span><span style="color:red;cursor: pointer;margin-left: 24px;" (click)="addnew()">新增章节</span></th>
          </tr>
          </thead>
        </ng-template>
        <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of charpterList;let i = index">
          <td nz-td>
            <nz-input nzAllowClear [nzDisabled]="i!=indexs" [(ngModel)]="data.sectionname" [nzPlaceHolder]="'请输入章节名'" [nzSize]="'large'"></nz-input>
          </td>
          <td nz-td style="text-indent: 8px;">
            <nz-select
              [nzDisabled]="i!=indexs"
              [(ngModel)]="data.sectionsort"
              [nzSize]="'large'"
              [nzPlaceHolder]="'choose'">
              <nz-option
                *ngFor="let item of options"
                [nzLabel]="item.label"
                [nzValue]="item.value">
              </nz-option>
            </nz-select>
          </td>
          <td nz-td style="text-indent: 8px;">
              <span>
                <a (click)="indexs = i">编辑</a>
                <span nz-table-divider></span>
                <a (click)="tosave(data.sectionname,data.sectionsort,data.id,i)">保存</a>
                <span nz-table-divider></span>
                <a (click)="todels(data.id)">删除</a>
              </span>
          </td>
        </tr>
        </tbody>
      </nz-table>

    </div>
  </ng-template>
</nz-modal>
